import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import HomeView from '../views/home/index.vue'
import KindView from '../views/kind/index.vue'
import CartView from '../views/cart/index.vue'
import UserView from '../views/user/index.vue'

import FooterCom from '../components/footerCom.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    // redirect 设置路由的重定向，修改路由的路径
    redirect: '/home',
    // 路由的独享守卫，只有进入这个页面的时候才会被执行的守卫
    // beforeEnter: (to, from) => {
    // reject the navigation
    // return false
    // },
  },
  {
    path: '/home',
    name: 'home',
    // 命名视图，命名视图就是可以在一个位置配置多个路由出口
    components: {
      default: HomeView,
      footer: FooterCom
    },
    meta: {
      // 定义路由的元信息，可以判断 hidden 来决定是否显示 footer
      hidden: true,
      title: "首页"
    }
  }, {
    path: '/kind',
    name: 'kind',
    components: {
      default: KindView,
      footer: FooterCom
    },
    meta: {
      // 定义路由的元信息，可以判断 hidden 来决定是否显示 footer
      hidden: true,
      title: '分类'
    }
  },
  {
    path: '/cart',
    name: 'cart',
    components: {
      default: CartView,
      footer: FooterCom
    },
    meta: {
      // 定义路由的元信息，可以判断 hidden 来决定是否显示 footer
      hidden: true,
      title: '购物车'
    }
  },
  {
    path: '/user',
    name: 'user',
    components: {
      default: UserView,
      footer: FooterCom
    },
    meta: {
      // 定义路由的元信息，可以判断 hidden 来决定是否显示 footer
      hidden: true,
      title: '我的'
    }
  },
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/login/index.vue'),

  },
  {
    path: '/register',
    name: 'register',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/register/index.vue'),
    redirect: '/register/step1',
    children: [
      {
        path: 'step1',
        name: 'step1',
        component: () => import('../views/register/step1.vue'),
      },
      {
        path: 'step2',
        name: 'step2',
        component: () => import('../views/register/step2.vue'),
      },
      {
        path: 'step3',
        name: 'step3',
        component: () => import('../views/register/step3.vue'),
      }
    ]

  }, {
    // 动态路由参数配置
    // path: '/detail/:proid',
    path: '/detail',
    name: 'detail',
    component: () => import('../views/detail/index.vue'),

  },
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/error/index.vue')
  },
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

// 动态添加路由
router.addRoute({
  path: '/a',
  name: 'a',
  component: HomeView
})


// ------------------ 路由守卫
// 路由前置守卫
router.beforeEach((to, from, next) => {
  // to 是我们要进入的页面路由
  // from 是我们原来的页面
  // console.log(to, from);

  if (to.path == '/cart') {
    // 判断用户有没有登录，有登录就放行，没有登录就要先去登录
    if (localStorage.getItem('loginState') != 'true') {
      // 没有登录
      // 不能放行，要进入登录页面
      next('/login')
    }
  }

  // 放行，允许跳转
  next()
})

// 全局解析守卫，和前置守卫的调用时机不同
// router.beforeResolve(async to => {
//   if (to.meta.requiresCamera) {
//     try {
//       await askForCameraPermission()
//     } catch (error) {
//       if (error instanceof NotAllowedError) {
//         // ... 处理错误，然后取消导航
//         return false
//       } else {
//         // 意料之外的错误，取消导航并把错误传给全局处理器
//         throw error
//       }
//     }
//   }
// })


// 全局后置守卫
router.afterEach((to, from, failure) => {
  // 如果跳转有问题的情况下会是问题原因
  // console.log(failure);

  // 做页面跳转之后要做的事情
  document.title = String(to.meta.title) == 'undefined' ? '嗨乐购' : String(to.meta.title)

})

/*
  路由守卫：
  1. 全局守卫
    beforeEach: 全局前置守卫，可以做路由鉴权(路由权限验证)，该守卫会在页面跳转之前被调用
    beforeResolve: 全局解析守卫，和前置守卫功能一直，但是调用时机不同
    afterEach: 路由后置守卫，跳转成功之后执行的函数，可以做跳转之后的事情
  2. 独享守卫
    beforeEnter: 路由独享守卫，只有当前配置的路由才会执行该守卫
  3. 组件内的守卫
    选项式：
      beforeRouteEnter: 在渲染该组件的对应路由被验证前调用
      beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用
      beforeRouteLeave: 在导航离开渲染该组件的对应路由时调用
    组合式：
      onBeforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用
      onBeforeRouteLeave: 在导航离开渲染该组件的对应路由时调用
 */


export default router
